<template>
  <page-main class="page-report-list page-pay-list">
    <div class="p-t-15"></div>
    <current-patient ref="currentPatient" @select="changePatient" />
    <div class="condition">
      <van-tabs v-model="searchParams.payStatus" @change="getList" title-active-color="#1989fa">
        <van-tab title="待支付" name="0"></van-tab>
        <van-tab title="支付记录" name="1"></van-tab>
      </van-tabs>      
    </div>
    <div class="m-x-15">
    <van-empty description="暂无记录" v-if="list.length == 0" />
    <van-pull-refresh v-model="refreshing" @refresh="getList" v-else>
      <van-checkbox-group v-model="theBillIds" direction="horizontal" style="width:100%;display:block" @change="getTheBillIds">
      <div class="fly-panel" v-for="(item,index) in list" :key="index">
        <div class="hd">
          <div class="title" v-if="searchParams.payStatus == '0'"><van-checkbox :name="item.theBillId" icon-size="16">{{item.officeName}} {{ item.staffName }}</van-checkbox></div>
          <div class="title" v-else>{{item.officeName}} {{ item.staffName }}</div>
          <div class="value">{{ $util.setName(item.theType, init_data.theType_list) }}</div>
        </div>
        <div class="bd" @click="$util.gotoPage('/pay/detail', {theBillId: item.theBillId})">
          <div class="desc">
            <p><span>就诊人：</span><span>{{ item.custName }}</span></p>
            <p class="ft-12 m-t-5">2023-02-02</p>
          </div>
          <div class="link">
            <span class="c-red">￥{{ item.balanceAmt }}</span>
          </div>
        </div>
      </div>
      </van-checkbox-group>
    </van-pull-refresh>
    </div>
    <van-submit-bar v-if="searchParams.payStatus == '0'" :loading="btn_loading" button-text="确认支付" button-color="#1989fa" @submit="submitPay">
      <van-checkbox v-model="isAll" icon-size="16" @click="changeAll">全选</van-checkbox>
      <div>合计：<b class="c-red">￥{{ totalPrice }}</b></div>
    </van-submit-bar>
  </page-main>
</template>
<script>
import currentPatient from '@/view/components/currentPatient';
import dateRange from '@/components/DateRange/tag';
import longList from '@/assets/mixins/longList';
export default {
  mixins: [longList],
  components:{
    currentPatient,
    dateRange
  },
  data(){
    return{
      patient:{},
      refreshing: false,
      searchParams:{
        patientId: null, 
        payStatus:'0'
      },
      list:[],
      init_data:{},
      btn_loading: false,
      theBillIds: [],
      totalPrice: 0,
      isAll: false,
    }
  },
  created(){
    this.getInitData();
  },
  mounted(){
    this.patient = this.$refs.currentPatient.getCurrentPatient();
    this.searchParams.patientId = this.patient.patientId;
    this.getList();
  },
  methods:{
    async getInitData(){
      this.init_data.theType_list = await this.$util.getDictList('the_type');
      this.init_data.payStatus_list = await this.$util.getDictList('pay_status');
    },
    getList(){
      this.refreshing = true;
      this.theBillIds = [];
      this.totalPrice = 0;
      this.isAll = false;
      this.$http('get', '/admin/bill/GetBillList', this.searchParams, (data,msg) => {
        this.list = data;
        this.refreshing = false;
      }, msg => {
        this.refreshing = false;
      })
    },
    changePatient(obj){
      this.searchParams.patientId = obj.patientId;
      this.getList();
    },
    changeAll(event){
      if(this.isAll){
        this.theBillIds = this.list.map(item => item.theBillId);
      }else{
        this.theBillIds = [];
      }
    },
    getTheBillIds(val){
      if(this.theBillIds.length == this.list.length){
        this.isAll = true;
      }else{
        this.isAll = false;
      }
      let totalPrice = 0
      this.list.forEach(item => {
        let i = this.theBillIds.indexOf(item.theBillId);
        if(i != -1){
          totalPrice += item.balanceAmt;
        }
      });
      this.totalPrice = Number(totalPrice.toFixed(2));
    },  
    async submitPay(){
      let params = {
        openId: localStorage.getItem('openId'),
        paymentType:2,
        theBillId: this.theBillIds,
        totalPaymentAmt: this.totalPrice
      };
      this.btn_loading = true;
      this.$toast.loading({
        message: '支付中，请稍等...',
        forbidClick: true,
      });
      this.$store.dispatch('submitAndPayGet', params).then(res => {
        setTimeout(() => {
          this.$toast.clear();
          this.btn_loading = false;
        }, 5000);
      }).catch(error => {
        this.$toast.clear();
        this.btn_loading = false;
      })    
    }
  }
}
</script>
